<template>
  <!--
  渲染数据
     1：定义api
     2:导入
     3：进入页面就调用
     4：存储数据并渲染

  增：
    1：创建一个新增弹框组件
    2：在父组件使用上新增弹框组件
    3：点击新增：打开弹框
    4：完成新增弹框内的布局处理
       员工列表显示
          a:定义api
          b:导入
          c:调用：什么时间调用（点击select时调用）
          d:存储数据并渲染
    5：完成表单验证
         前置条件：表单元素要完成v-model绑定
         基本表单验证
            el-form   model   rules
            el-form-item   prop
         全局表单验证
            el-form  ref
            this.$refs.form.validate((result)=>{})
         自定义表单验证
            rules:{
              prop的值:[
              {validator:(rule,value,callback)=>{
                callback():验证成功
                callback(new Error(失败信息))：验证失败
              }}
              ]
            }

    6：点击弹框内确定进行全局表单验证，验证通过要调用新增api
      a:定义新增api
      b:导入
      c:调用
    7：调用成功
       提示
       关闭弹框
       清空表单内数据与验证
       刷新父级列表

    删
      1：点击删除弹出确定框
      2：点击确定调用删除的api
           a:定义删除api
           b:导入
           c:调用
      3：删除成功后
         a:提示
         b:刷新了列表数据

    改：
      1：点击编辑打开弹框（共用的新增弹框）
      2：新增组件内定义一个变量用于区分是新增还是编辑
      3：点击新增与编辑时打开弹框时都要修改该变量为相应的值
      4：新增组件内的标题根据变量值来调整
      5：编辑打开弹框时数据要回显
      6：表单验证要调整
      7：定义编辑api
      8:导入编辑api
      9:点击确定根据不同场景调用api
         新增与编辑调用不同api
      10:调用成功
          提示
          关闭弹框
          清空表单验证与数据
          刷新父级列表数据
 -->
  <div class="departments">
    <el-card>
      <div class="main">
        <!-- el-tree
                 data:数据绑定
                 props:{
                  label:'label',
                  children:'children'
                 }
                 作用域插槽
                      v-slot="{node,data}"
                      node:组件内提供数据
                      data:当前项的数据
         -->
        <div class="item">
          <div class="name">传智教育</div>
          <div class="manager">负责人</div>
          <el-dropdown @command="commandEvent">
            <div>
              <span>操作</span>
              <i class="el-icon-arrow-down" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-tree :data="treeData" style="margin-top: 20px" default-expand-all>
          <template v-slot="{ data }">
            <div class="item" style="width: 100%">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <!--
                点击事件
                1: el-dropdown官方推荐点击事件处理
                      1：el-dropdown-item  command标识
                      2：el-dropdown  @command
                2：el-dropdown-item  @click.native="点击事件"

               -->
              <el-dropdown>
                <div>
                  <span>操作</span>
                  <i class="el-icon-arrow-down" />
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      @click.native="addEvent(data)"
                    >添加子部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="editEvent(data)"
                    >编辑子部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="delEvent(data)"
                    >删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <!-- 子传父
         子组件标签  @方法名="父组件方法"
         子组件内  this.$emit('方法名')
     -->
    <Add ref="add" :init-data="initData" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment, companyDepartmentDelete } from '@/api/departments'
import Add from './components/add'
export default {
  components: {
    Add
  },
  data() {
    return {
      treeData: [], // 树形数据
      initData: [] // 转换前的部门列表
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取组织架构部门列表数据
    async getData() {
      const res = await companyDepartment()
      this.initData = res.data.depts
      this.treeData = this.changeData(res.data.depts, '')
      console.log(res)
    },
    // 树形数据转换
    changeData(arr, pid) {
      // 1:找出第一层
      // 2:给第一层每一项加入空children
      // 3:给children进行递归调用拿到子集
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // el-tree内的点击事件
    commandEvent(command) {
      switch (command) {
        case 'add':
          // 打开新增弹框组件
          this.$refs.add.show = true
          // 将点击项的id值传递给form的pid
          this.$refs.add.form.pid = ''
          // 修改add组件内的mode的值
          this.$refs.add.mode = 'add'
          break
      }
    },
    // 添加点击处理
    addEvent(data) {
      console.log('data', data)
      // 打开新增弹框组件
      this.$refs.add.show = true
      // 将点击项的id值传递给form的pid
      this.$refs.add.form.pid = data.id
      // 修改add组件内的mode的值
      this.$refs.add.mode = 'add'
    },
    // 删除事件
    delEvent(data) {
      // 1:确定框
      this.$confirm('您确定删除该项吗', '提示')
        .then(async() => {
          await companyDepartmentDelete(data.id)
          this.$message.success('删除成功')
          // 刷新当前列表
          this.getData()
        })
        .catch(() => {})
    },
    // 编辑事件
    editEvent(data) {
      // 打开新增弹框组件
      this.$refs.add.show = true
      // 修改add组件内的mode的值
      this.$refs.add.mode = 'edit'
      // 数据回显:注意要深拷贝
      this.$refs.add.form = JSON.parse(JSON.stringify(data))
      console.log('data', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 15px;
  .main {
    width: 80%;
    margin: 0 auto;
    .item {
      display: flex;
      align-items: center;
      .name {
        flex: 1;
      }
      .manager {
        width: 120px;
      }
    }
  }
}
</style>
